<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>嗯？是什么呢</title>
    <style>
      .out {
        width: 120px;
        height: 120px;
        background-color: palegreen;
        margin: 100px auto;
        overflow: hidden;
      }
      .out p{
          font-size: 12px;
          text-align: center;
          color: white;
          visibility: hidden;

      }
      .in {
        display: block;
        width: 120px;
        height: 120px;
        background-image: url("img/图层 1.png");
        /*background-size: cover;*/
        transform: translate(0, 0);
        transition: all 1s;
      }
      .out:hover .in {
        transform: translate(0, 100px);

      }
      .first{
          display: block;
          width: 100px;
          height: 100px;
          background-image: url("img/图层 1.png");
          background-size: cover;
          color: black;
        transform: translate(0, 0);
          transition: all 1s;
      }
      .out:hover .first {

        transform: translate(0, 100px);
      }

    </style>
  </head>
  <body>
  <div class="out"><p>被发现了嘻嘻</p><div class="in"><div></div>
  <script>
      var num=0;
      var div=document.querySelector('.out');
      var div1=document.querySelector('.in');
      var p=document.querySelector('p');
      div1.onclick=function (){
          num++;
          console.log(num);
          if(num>2){
              div1.classList.remove('in');
              div1.classList.add('first');
              div.classList.add('p');
              p.style.visibility='visible'
          }
      }


  </script>
  </body>
</html>
